var i=(Math.random()*500);
var j=(Math.random()*500);
var a=(Math.random()*500);
var b=(Math.random()*500);

var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";

function gameLoop () {
window.requestAnimationFrame(gameLoop);
coin.update();
coin.render();
coin2.update();
coin2.render2();
}
// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);
canvas.addEventListener("mousedown",tap);
function tap (e){
	tapX = e.targetTouches ? e.targetTouches[0].pageX: e.pageX,
	tapY = e.targetTouches ? e.targetTouches[0].pageY: e.pagey,
	if (tapX >= coin.xpos && tapX <= coinx+100){ }
	
function sprite (options) { 

var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0;
numberOfFrames = options.numberOfFrames || 1;


that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;


that.loop = options.loop;

that.update = function () {
tickCount += 1; 
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) { 

// Go to the next frame
frameIndex += 1; 
} else if (that.loop) {
frameIndex = 0;
}
else
{
frameIndex=0;
}
}
};



that.render = function () { 
// Clear the canvas
that.context.clearRect(i, j, that.width, that.height);


// Draw the animation 
that.context.drawImage( 
that.image, 
frameIndex * that.width / numberOfFrames,
0,
that.width/ numberOfFrames, 
that.height,
i, 
j,
that.width / numberOfFrames,
that.height); 
};

that.render2 = function () { 

that.context.clearRect(b, a, that.width, that.height);

that.context.drawImage( 
that.image, 
frameIndex * that.width / numberOfFrames,
0,
that.width/ numberOfFrames, 
that.height,
b, 
a,
that.width / numberOfFrames,
that.height);
};


return that;
}

var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;

var coin = sprite({
context: canvas.getContext("2d"),
width: 1000,
height: 100,
image: coinImage,
numberOfFrames: 10,
ticksPerFrame: 4
});

var coin2 = sprite({
context: canvas.getContext("2d"),
width: 1000,
height: 100,
image: coinImage,
numberOfFrames: 10,
ticksPerFrame: 1
});